<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-05-12 10:08:15
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-05-12 17:32:25
 * @FilePath: /gptfront-dev/src/components/ConversationGroup/Conversation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="conversation flex flex-col [transform:rotateX(180deg)]">
    <view class="flex items-center">
      <view
        class="size-5 rounded-full"
        :class="{
          'bg-orange-700': conversation.role === 'user',
          'bg-purple-600': conversation.role === 'assistant',
        }"
      ></view>
      <view class="ml-2 text-xs">
        {{ conversation.role === 'assistant' ? 'CHATGPT' : 'YOU' }}
      </view>
    </view>
    <view class="mt-1 pl-7">
      <view class="flex gap-2 overflow-x-auto">
        <StyledImage
          v-for="(file, fIdx) in conversation.files?.filter(
            (f) => f.type === 0,
          )"
          :key="fIdx"
          :src="file.fileUrl"
          @click="handlePreviewImage(conversation.files, fIdx)"
        />
      </view>
      <view
        v-if="conversation.files?.filter((f) => f.type === 1).length > 0"
        class="flex flex-col gap-2 py-2"
      >
        <view
          v-for="(file, fIdx) in conversation.files?.filter(
            (f) => f.type === 1,
          )"
          :key="fIdx"
          class="flex items-center gap-2"
        >
          <uni-icons font-family="heroicons-outline" :size="22">
            {{ '\ue995' }}
          </uni-icons>
          <text>{{ file.fileName }}</text>
        </view>
      </view>
      <view
        class="rich-text-content select-text text-base"
        v-html="md.render(conversation.message ?? '')"
      />
      <view class="flex items-center gap-2 mt-2">
        <view class="flex items-center">
          <uni-icons type="left" size="16"></uni-icons>
          <view>2/2</view>
          <uni-icons type="right" size="16"></uni-icons>
        </view>
        <uni-icons type="loop" size="22"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { md } from '@/utils/markdown'
import StyledImage from '../StyledImage.vue'

export default defineComponent({
  name: 'Conversation',
  components: {
    StyledImage,
  },
  props: {
    conversation: {
      type: Object,
      default: undefined,
    },
  },
  setup() {
    return {
      md,
    }
  },
})
</script>

<style lang="scss" scoped>
.rich-text-content {
  p {
    line-height: 1.75rem;
  }
}
</style>
